<script setup lang="ts">
    import { ref, reactive, toRefs, watch, computed,onMounted } from 'vue';
    // 由于有vue2和vue3的项目，VsCode同时使用了vetur和volar插件有冲突导致的提示。这也是能正常运行但爆红的原因
    import publicTitle from '@/components/publicTitle.vue';
    import publicScrollView from '@/components/publicScrollView.vue';

    // tabs 序号
    const tabsIndex = ref(1);
    // tabs点击事件
    const tabs = (index:number)=>{
        tabsIndex.value = index;
    }
       
  const list:any = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

</script>

<template>
    <div class="todoWork">
        <public-scroll-view >
            <template v-slot:scrollViewTop>
                <public-title tit="待办事项"></public-title>
                <div class="tabs">
                    <div class="tab" :class="tabsIndex==1?'active':''" @click="tabs(1)">
                        我的待办
                        <div class="tips-num">3</div>
                    </div>
                    <div class="tab" :class="tabsIndex==2?'active':''" @click="tabs(2)">
                        我的已办
                        <div class="tips-num">5</div>
                    </div>
                </div>
            </template>

            <template v-slot:scrollViewContent>
                <div class="content">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list
                            v-model:loading="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <div class="list-box">
                                <div class="list-item">
                                    <div class="list-item-tit">
                                        建筑工地夜间施工
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>

                                    <div class="list-item-tips">
                                        批办-待处理
                                    </div>

                                </div>

                                <div class="list-item">
                                    <div class="list-item-tit">
                                        建筑工地夜间施工
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>

                                    <div class="list-item-tips">
                                        待办结
                                    </div>

                                </div>

                                <div class="list-item">
                                    <div class="list-item-tit">
                                        建筑工地夜间施工
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>

                                    <div class="list-item-tips">
                                        待转派承办单位
                                    </div>

                                </div>

                                <div class="list-item">
                                    <div class="list-item-tit">
                                        建筑工地夜间施工
                                    </div>
                                    <div class="list-item-info">
                                        <span class="info">投诉人：李明宇</span>
                                        <span class="info">投诉时间：025-05-21</span>
                                    </div>

                                    <div class="list-item-tips">
                                        批办-待处理
                                    </div>

                                </div>

                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </template>

        </public-scroll-view>
    </div>
</template>

<style lang="less" scoped>
    .todoWork{
        min-height: 100vh;
        background: #f5f5f5;
        .tabs{
            display: flex;
            justify-content: space-between;
            background: #fff;
            .tab{
                flex: 1;
                height: 140px;
                line-height: 140px;
                text-align: center;
                font-size: 52px;
                color: #787878;
                font-weight: 500;
                position: relative;
                .tips-num{
                    height: 38px;
                    border-radius: 19px;
                    background: #FF4444;
                    color: #FFFFFF;
                    font-size: 30px;
                    position: absolute;
                    top: 31px;
                    right: 130px;
                    line-height: 38px;
                    padding: 0px 19px;
                }
            }
            .active{
                color: #191919;
                font-weight: bold;
                &::after{
                    content: '';
                    display: block;
                    width: 38px;
                    height: 10px;
                    background: #0E70EF;
                    position: absolute;
                    border-radius: 5px;
                    bottom: 22px;
                    left: 50%;
                    margin-left: -19px;
                }
            }
        }
        .content{
            padding: 30px;
            .list-box{
                .list-item{
                    margin-bottom: 30px;
                    background: #fff;
                    border-radius: 30px;
                    padding: 65px 58px 77px 58px;
                    .list-item-tit{
                        height: 52px;
                        font-weight: bold;
                        font-size: 50px;
                        color: #191919;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 52px;
                    }
                    .list-item-info{
                        font-size: 44px;
                        color: #656565;
                        margin-top: 50px;
                        .info{
                            margin-right: 116px;
                        }
                    }
                    .list-item-tips{
                        color: #103363;
                        font-size: 36px;
                        border-radius: 10px;
                        height: 80px;
                        text-align: center;
                        line-height: 80px;
                        background: #B9D8FE;
                        display: inline-block;
                        padding: 0px 28px;
                        margin-top: 38px;
                    }
                }
            }
        }
    }
</style>